<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 首页 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 阿里巴巴 -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2967084_17nyusztgqs.css">
    <script src="./js/remscale.js"></script>
    <!-- swiper的css -->
    <link rel="stylesheet" href="./swiper-7.4.1/swiper/swiper-bundle.min.css">
    <!-- jq文件夹 -->
    <script src="./jQuery文件夹/jquery-3.6.0.js"></script>
</head>

<body>
    <!-- 头部大盒子 -->
    <div id="wrap" class="type_area">
        <div class="wrap_top">
            <em class="iconfont icon-daohangdizhi"></em>
            <img src="./image/logo.png" alt="">
            <input type="text" class="iconfont icon-sousuo" placeholder="&#xe651; 按内容搜索">
            <em class="iconfont icon-shangpu"></em>
        </div>
        <!-- 导航栏 -->
        <div class="wrap_nav">
            <ul>
                <li class="active"><a href="#">推荐</a></li>
                <li><a href="#">女装</a></li>
                <li><a href="#">鞋包</a></li>
                <li><a href="#">居家</a></li>
                <li><a href="#">母婴</a></li>
                <li><a href="#" class="mr0">美妆</a></li>
            </ul>
            <div class="nav_right">
                <em class="iconfont icon-gengduo"></em>
                分类
            </div>
        </div>
    </div>
    <!-- 轮播图 -->
    <div id="banner" class="type_area">
        <!-- swiper -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./image/l1.webp"></div>
                <div class="swiper-slide"><img src="./image/l2.webp"></div>
                <div class="swiper-slide"><img src="./image/l3.webp"></div>
                <div class="swiper-slide"><img src="./image/l4.webp"></div>
                <div class="swiper-slide"><img src="./image/l5.webp"></div>
                <div class="swiper-slide"><img src="./image/l6.webp"></div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <!-- 引入链接 -->
    <script src="./swiper-7.4.1/swiper/swiper-bundle.min.js"></script>
    <script>
        new Swiper(".mySwiper", {
            cssMode: true,
            autoplay: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            pagination: {
                el: ".swiper-pagination",
            },
            mousewheel: true,
            keyboard: true,
        });
    </script>
    <!-- 轮播图下面的四个盒子 -->
    <ul id="forth" class="type_area">
        <li><img src="./image/闹钟.png">
            <a href="#">限时秒杀</a></li>
        <li><img src="./image/hot.png">
            <a href="#">畅销商品</a></li>
        <li><img src="./image/huangguan.png">
            <a href="#">品质大牌</a></li>
        <li><img src="./image/car.png">
            <a href="#">小U自营</a></li>
        <li><img src="./image/pigl.png">
            <a href="#">积分商城</a></li>
    </ul>
    <!-- 背景图和倒计时 -->
    <div id="bc" class="type_area">
        <div class="flower">
            <h1>限时秒杀<a href="#">查看更多></a></h1>
            <p>每天0点场 好货秒不停</p>
            <!-- 倒计时 -->
            <div class="timer">
                <p></p>
                <span>:</span>
                <p></p>
                <span>:</span>
                <p></p>
                <span>:</span>
                <p></p>
            </div>
        </div>
        <!-- 右侧的第一块 -->
        <div class="bcr1">
            <h1>品牌上新</h1>
            <p>九点整</p>
            <div>疯狂抢红包></div>
        </div>
        <!-- 右侧的第二块 -->
        <div class="bcr2">
            <h1>日用好物</h1>
            <p>愿君多采撷</p>
            <div>塞满奖券></div>
        </div>
    </div>
    <!-- 双十一尖货预购 -->
    <div id="DoubleEleven" class="type_area">
        <p class="earth">
            <a href="JavaScript:;">双十一尖货预购</a>
            <a href="JavaScript:;">畅销全球</a>
        </p>
        <ul class="double">
            <!-- <li><img src="./image/01.png"></li>
            <li><img src="./image/02.png"></li>
            <li><img src="./image/03.png"></li>
            <li><img src="./image/04.png"></li> -->
        </ul>
        <ul class="double">
            <!-- <li><img src="./image/fifth1.png"></li>
            <li><img src="./image/fifth2.png"></li>
            <li><img src="./image/fifth3.png"></li>
            <li><img src="./image/fifth4.png"></li> -->
        </ul>
        <!-- 热门推荐 -->
        <ul id="hotdoor">
            <li style="background: #d46a13;color: #fff;">热门推荐</li>
            <li>上新推荐</li>
            <li>所有商品</li>
        </ul>
        <ul id="phone">
            <!-- <li>
                <img src="./image/p1.webp">
                <h2>小米10</h2>
                <p>现价格：￥3999</p>
                <s>原价格：￥3999</s>
                <a href="JavaScript:;">立即抢购</a>
            </li> -->
        </ul>
        <ul id="phone1"></ul>
        <ul id="phone2"></ul>
    </div>

    <!-- 引入首页js -->
    <script src="./js/index.js"></script>
</body>

</html>